<template>
	<view class="body">
		<h2>注册</h2>
		<input class="uni-input" focus placeholder="输入昵称" v-model="user.name"/>
		<input class="uni-input" type="password" focus placeholder="输入密码" v-model="user.password"/>
		<input class="uni-input"  focus placeholder="输入手机号" v-model="user.phoneNumber"/>
		<view class="avatar" @click="uploadImg()">
			<p v-show="!avatarShow">点击上传头像</p>
			<img :src="avatarImg" v-show="avatarShow">
		</view>
		<view @click="submit()">
			<zy-button class="button" :content="buttonContent"></zy-button>
		</view>
		<uni-popup ref="popup" type="message">
		    <uni-popup-message :type="popup.type" :message="popup.message" :duration="popup.duration"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="borad" type="dialog">
		    <uni-popup-dialog type="base" :title="borad.title" :content="borad.message" :duration="2000" :before-close="true" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import button from '../components/zy-button.vue'
	export default{
		data(){
			return {
				user:{
					name:"",
					password:"",
					phoneNumber:""
				},
				popup:{
					type:'success',
					message:'成功',
					duration:2000
				},
				borad:{
					title:'注意!',
					message:'boom'
				},
				buttonContent:"注册",
				avatarImg:"",
				avatarShow:false
			}
		},
		onLoad(options){
			this.name = options.name;
		},
		components:{
			'zy-button':button
		},
		methods:{
			confirm(done){
				this.popup.type = 'success';
				this.popup.message = '请前去登陆';
				this.$refs.popup.open();
				setTimeout(()=>{
					uni.navigateTo({
						url:'./login'
					})
				},2000);
			},
			submit(){
				let noNull = true;
				for(var item in this.user){
					if(this.user[item]==''||this.user[item]==undefined){
						this.popup.type = 'warn';
						this.popup.message = '字段不能为空';
						this.$refs.popup.open();
						noNull = false;
					}
				}
				if(noNull){
					uni.request({
						url:this.config.serverUrl+'/signIn/register',
						data:this.user,
						method:'POST'
					}).then(res=>{
						if(res[1].data.status){
							let userId = res[1].data.userId;
							uni.uploadFile({
								url:this.config.serverUrl+'/uploadImg',
								name:res[1].data.userId,
								filePath:this.avatarImg,
								formData:{
									userId:res[1].data.userId
								},
								success:(res)=>{
									res.data = JSON.parse(res.data);
									if(res.data.status){
										this.borad.message = `请记住您的唯一识别ID:${userId},这就是您以后的登陆账号!`
										this.borad.title = "注意";
										this.$refs.borad.open();
									} else {
										this.popup.type = 'error';
										this.popup.message = '发生错误';
										this.$refs.popup.open();
									}
								}
							})
						}
					})
				}
			},
			uploadImg(){
				uni.chooseImage({
					count:1,
					sourceType: ['album','camera'],
					success:(res)=>{
						console.log(res);
						this.avatarImg = res.tempFilePaths[0];
						this.avatarShow = true;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.avatar{
		width:100px;
		height:100px;
		background-color: white;
		margin:0 auto;
		border-radius:100px;
		position:relative;
		>img{
			position:absolute;
			width:100px;
			height:100px;
			border-radius:100px;
			z-index:3;
		}
		>p{
			width:100%;
			position:absolute;
			font-size:14px;
			color:black;
			z-index:1;
			text-align: center;
			line-height: 100px;
		}
	}
	.body{
		width:100%;
		height:100vh;
		background-color:rgba(0,0,0,0.75);
		>h2{
			color:white;
			text-align: center;
		}
		.button{
			width:60%;
			margin:20px auto;
		}
		input{
			width:70%;
			margin:30px auto;
			border-bottom:1px solid white;
			color:white;
			font-size:26px;
			text-align: center;
		}
		
	}
</style>

